<%@ page contentType="text/html; charset=utf-8" %>
<html>
<head>

<%
  String nick = "fe";
  com.jsos.chat.LoginBean lb = (com.jsos.chat.LoginBean)session.getAttribute("chatnick");

  if (lb!=null) nick = lb.getUserName();

  String prompt = "type your nick";
%>

<style>

#main
{
  width:291px;
  height:200px;
  border:1px black solid;
  padding: 3px 3px 3px 3px;
  overflow: auto;
}

#control
{
  margin-top:3px;
}

#nick
{
 width:300px;
 padding-left:3px;
 padding-right:3px;
 border:1px black solid;
}

#msg
{
 width:300px;
 padding-left:3px;
 padding-right:3px;
}

</style>

<script type="text/javascript">

 var nick="<%=nick%>";
 var last=-1;
 var prompt = "<%=prompt%>";

 function call(command,params)
 {
  var script = document.createElement("script");
      script.setAttribute("src", '/servlet/ChatEngine'+command+'?'+params);
      script.setAttribute("type", "text/javascript");
      document.body.appendChild(script); 
 }

 function login(e)
 {
   var code = 0;

   if (!e) var e = window.event;
   if (e.keyCode) {
     code = e.keyCode;
   } else if (e.which) {
     code = e.which;
   }

   if (code == 13)
   {
     var s = document.getElementById("nick").value;
     if (s!='')
       joinChat(s); 
   }

   return false;
 }

 function getMessages()
 {
   call('/messages/get','roomId=0&sinceId='+last+'&callback=callback3');
 }

 function sendMessage(from, txt)
 {
   call('/messages/create','roomId=0&name='+from+'&txt='+encodeURIComponent(txt)+'&callback=callback2');
 }

 function joinChat(n)
 {
   call('/users/login','roomId=0&name='+n+'&'+'callback=callback1');
 }

 function callback3(o)
 {

   if (o.code=='1')
   {
     var msg = eval("("+o.message+")");
     var s = "";

     for (var i=0; i<msg.length; i++)
     {

        if (nick!='' && msg[i].to!='')
        {
          if (nick==msg[i].to || nick==msg[i].from)
           s += msg[i].from+": "+msg[i].txt+"<br/>";
        }
        else
          s += msg[i].from+": "+msg[i].txt+"<br/>";   

        var id = eval("("+msg[i].id+")");
        if (id>last) last=id;      
     } 

     if (s!='')
     {
      var old = document.getElementById('main').innerHTML;
      document.getElementById('main').innerHTML = s+old;
     }

     setTimeout("getMessages()", 3000);  
   }
 }

 function callback2(o)
 {
   var res = eval("("+o.code+")");

   if (res<=0)
   {
     alert("Could not add message. Reason is: "+o.message);
   }
 }

 function callback1(o)
 {
   if (o.code=='1')
   {
     document.getElementById("nick").style.display="none";
     document.getElementById("msg").style.display="block";
     document.getElementById("msg").focus();
     sendMessage(o.name," joined us");
     nick = o.name;
   }
   else
   {
     document.getElementById("nick").value = prompt+": "+o.message;
   }   
 }

 function msg(e)
 {
   var code = 0;

   if (!e) var e = window.event;
   if (e.keyCode) {
     code = e.keyCode;
   } else if (e.which) {
     code = e.which;
   }

   if (code == 13)
   {
     var s = document.getElementById("msg").value;
     if (s!='')
       sendMessage(nick,s); 

     document.getElementById("msg").value="";
   }

   return false;
 }

 function clearPrompt()
 {
   var s = document.getElementById("nick").value;
   if (s.indexOf(prompt)>=0) 
     document.getElementById("nick").value="";
 }
 
 function setFocus()
 {
   var o = document.getElementById("msg");
   if (o) o.focus();  

   setTimeout("getMessages()", 3000); 
 }
 
</script>

</head>

<body onLoad="setFocus()">


<div id="main">
 
</div>

<div id="control">

<% if (nick.length()==0) { %>
  <input type="text" id="nick" onFocus="clearPrompt()" value="<%=prompt%>" onKeyUp="login(event);">
  <input type="text" id="msg" style="display:none" value="" onKeyUp="msg(event);">

<% } else { %>

  <input type="text" id="msg" value="" onKeyUp="msg(event);">

<% } %>

</div>


</body>
</html>